<template>
  <div id="map" ref="rootmap">

  </div>
</template>

<script>
  import "ol/ol.css";
  import { Map, View } from "ol";
  import TileLayer from "ol/layer/Tile";
  // import OSM from "ol/source/OSM";
  import XYZ from "ol/source/XYZ";
  export default {
    data() {
      return {
        map: null
      };
    },
    mounted() {

      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new XYZ({
              url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
            }),
          })
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [110.301231,25.072028],  //深圳
          zoom: 16
        })
      });
    }
  };
</script>
<style>
  #map{height:100%;}
  /*隐藏ol的一些自带元素*/
  .ol-attribution,.ol-zoom { display: none;}
</style>

